<script setup>
    import {ref} from 'vue'
    import axios from 'axios'
    import { showMsg } from '../Util';
    import { computed } from 'vue';
        let props = defineProps(['student','type','title'])
        let emits = defineEmits(['submit','close'])
        let obj = computed(()=>{
            return props.student;
    })
function sub(){
    axios.post('/api/add_admin',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg)
        }
    })
}
function edit(){
    axios.put('/api/update_student',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000)
        }
    })
}
</script>

<template>
    <div class="box">
        <div class="x">
            <span>{{ title }}</span>
            <span @click="emits('submit')" style="cursor: pointer; user-select: none;">X</span>
        </div>
        <select v-model="obj.fy" class="nb">
            <Option value="标准间">标准间</Option>
            <Option value="豪华房">豪华房</Option>
            <Option value="海景房">海景房</Option>
            <Option value="总统套房">总统套房</Option>
            <Option value="大床房">大床房</Option>
        </select>
        <!-- <input type="text" placeholder="房型" v-model="obj.fy" /> -->
        <input type="text" placeholder="可住人数" v-model="obj.rs" />
        <input type="text" placeholder="床位数" v-model="obj.cw" />
        <input type="text" placeholder="房价" v-model="obj.fj">
        <input type="text" placeholder="剩余" v-model="obj.sy">
        <input v-if="type=='new'" type="button" value="提交" @click="sub"  class="bu"/>
        <input v-if="type=='edit'" type="button" @click="edit" value="提交修改">
    </div>
</template>

<style scoped>
    .box{
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width:200px;
        height: 280px;
        gap:8px;
        /* margin-top:50px; */
        position: absolute;
        left: 45%;
        top: 30%;
        background-color: #eee;
        box-shadow: 2px 2px 5px rgba(0, 0.2, 0, 0.3); 
    }
    .x{
        display: flex;
        width: 168px;
        justify-content: space-between;
        color: #0aa;
    }
    .bu{
        cursor: pointer;
        background-color: #0aa;
        width: 180px;
        color: white;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    .bu:hover{
        background-color: #cb119a; /* Green */
        color: white;
    }
    input{
        outline: none;
        border: 0;
        /* height: 100px; */
        padding: 7px;
        /* background-color: #0aa; */
    }
</style>